<template>
  <div class="container">
    <div class="panda">
      <div class="ear left"></div>
      <div class="ear right"></div>
      <div class="face">
        <div class="eye-shadow left"></div>
        <div class="eye-white left">
          <div class="eye-ball"></div>
        </div>
        <div class="eye-shadow right"></div>
        <div class="eye-white right">
          <div class="eye-ball"></div>
        </div>
        <div class="nose"></div>
        <div class="mouth"></div>
      </div>
      <div class="body"></div>
      <div class="foot left">
        <div class="sole"></div>
      </div>
      <div class="foot right">
        <div class="sole"></div>
      </div>
    </div>
    <div class="login-box">
      <div class="hand left"></div>
      <div class="hand right"></div>
      <h1>用户登录</h1>
      <div class="ipt-box">
        <input type="text" required v-model="form.email" >
        <label>邮箱</label>
      </div>
      <div class="ipt-box">
        <input type="password" id="password" required v-model="form.password">
        <label>密码</label>
      </div>
      <button @click="submitForm">登录</button>
      <br/>
      <div style="font-size: 13px">
        <span >还没有账号？ </span>
        <a @click="jump"> 注册一个 </a>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
$(function () {
  $('#password').focusin(function () {
  // 密码框选中
    $('.login-box').addClass('up')
  }).focusout(function () {
  // 密码框非选中
    $('.login-box').removeClass('up')
  })
}
)
// 眼球移动
$(function () {
  $(document).on('mousemove', function (e) {
    let dw = $(document).width() / 10
    let dh = $(document).height() / 18
    let x = e.pageX / dw
    let y = e.pageY / dh
    $('.eye-ball').css({
      left: x,
      top: y
    })
  })
}
)
export default {
  name: 'login',
  data () {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    jump: function () {
      this.$router.push('/register')
    },
    submitForm: function () {
      if (this.form.email === '') {
        this.$message.error('请输入邮箱！')
        return
      }
      if (this.form.password === '') {
        this.$message.error('请输入密码！')
        return
      }
      if (this.form.password.length < 6 && this.form.password.length > 20) {
        this.$message.error('密码长度为6-20个字符！')
      }
      this.$axios.post('/login/', this.form).then((res) => {
        if (res.data.flag === true) {
          this.$message.success('登录成功！')
          setTimeout(this.skipper(), 1500)
        } else {
          this.$message.error(res.data.msg)
        }
      }
      )
    },
    skipper: function () {
      this.$router.push('/main')
    }
  }
}
</script>

<style scoped>
@import '../css/login.css';
</style>
